<template>
	<view class="pd30 bdr16 box-shadow bg-w">
		<navigator url="/pages/unicard/detail">
		<view class="unicard-photo">
			<view class="unicard-tag-type">{{card.type}}</view>
			<image mode="aspectFill" :src="card.image"></image>
		</view>
		<view class="mt30 ftw600 ft16 text-main">{{card.title}}</view>
		<view class="flex alcenter mt20">
			<view class="tag-unicard-cat" v-for="(item,index) in card.features" :key="index">{{item}}</view>
		</view>
		<view class="flex alcenter mt20 text-info">
			{{card.description}}
		</view>
		<view class="flex alcenter space mt20">
			<!-- <view class="unicard-save flex alcenter">
				<uni-icons type="gift"></uni-icons>
				省10000
			</view> -->
			<view class="">
				<text class="ft14 text-info">有效期：</text>
				<text class="ft14 text-theme">{{card.validity}}</text>
			</view>
			<view class="unicard-buy-btn text-w flex center alcenter ft14 ftw600">
				立即开通
			</view>
		</view>
		</navigator>
	</view>
</template>

<script>
	export default{
		props:{
			card: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data(){
			return {
				
			}
		}
	}
</script>

<style>
	.unicard-buy-btn{
		width:160rpx;
		height:64rpx;
		background:#FF6D00;
		box-shadow:0rpx 8rpx 16rpx 0rpx rgba(255,109,0,0.3);
		border-radius:32rpx;
	}
	.unicard-save{
		background:linear-gradient(90deg,rgba(255,107,130,1) 0%,rgba(255,139,114,1) 100%);
		height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color:#FFFFFF;
	}
	.unicard-save image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
	.tag-unicard-cat{
		padding: 4rpx 12rpx;
		border:2rpx solid #CCCCCC;
		color:#999999;
		font-size: 24rpx;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}
	.unicard-photo{
		position: relative;
		width: 100%;
		height: 316rpx;
		overflow: hidden;
		border-radius: 16rpx;
	}
	.unicard-photo image{
		width: 100%;
		height: 316rpx;
	}
	.unicard-tag-type{
		padding: 4rpx 12rpx;
		background: rgba(0,0,0,.3);
		color:#FFFFFF;
		font-size: 24rpx;
		display: inline-flex;
		position: absolute;
		border-radius:0rpx 0rpx 8rpx 0rpx;
		z-index: 2;
		
	}
</style>